<template>
  <div class="serach-box">
    <div class="menu-button" @click="treeShow = !treeShow">
      <img src="../../assets/tree/menu.svg" alt="" style="width: 18px; height: 18px" />
    </div>
    <div class="change-button">
      <span>地名</span>
      <el-icon>
        <Switch />
      </el-icon>
    </div>

    <el-input placeholder="搜地点（'学校'或'106.35'）" class="input-box" v-model="searchText" clearable></el-input>
    <div class="menu-button">
      <img src="../../assets/tree/search.svg" alt="" style="width: 18px; height: 18px" />
    </div>
  </div>
  <div class="tree-list" v-if="treeShow">
    <el-tabs tab-position="left" class="demo-tabs">
      <el-tab-pane>
        <template #label>
          <i class="icon iconfont icon-tuceng1"></i>
        </template>
        <TreeBox />
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <i class="icon iconfont icon-tucengshezhi"></i>
        </template>
        <Opacity />
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <i class="icon iconfont icon-gongjuxiang"></i>
        </template>
        <SheZhi />
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <i class="icon iconfont icon-gengduoshezhi"></i>
        </template>
        <Task />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Task from "../../components/shezhi/task.vue";
import SheZhi from "../../components/shezhi/shezhi.vue";
import TreeBox from "../../components/shezhi/treeBox.vue";
import Opacity from "../../components/shezhi/opacity.vue";

const treeShow = ref(false);
const searchText = ref("");
</script>

<style lang="scss" scoped>
.serach-box {
  width: 100%;
  height: 40px;
  background-color: #10202ecc;
  display: flex;
  align-items: center;
  border-radius: 4px;

  ::v-deep .el-input {
    .el-input__wrapper {
      padding: 0 5px;
      background-color: transparent;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;

      .el-input__inner {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #dddddd;
      }
    }
  }

  .menu-button {
    padding: 15px 10px;
    display: flex;
    justify-content: center;
    position: relative;

    &:first-child {
      margin-right: 10px;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        width: 1px;
        height: 35%;
        background-color: #47506a;
        transform: translateY(-50%);
        z-index: 3;
      }
    }

    &:last-child {
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 1px;
        height: 35%;
        background-color: #47506a;
        transform: translateY(-50%);
        z-index: 3;
      }
    }
  }

  .change-button {
    padding: 0 10px;
    height: 24px;
    width: 85px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    opacity: 1;
    background: linear-gradient(134.2deg, #00e1bb 1%, #008ddc 100%);
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      margin-right: 5px;
    }
  }
}

.tree-list {
  position: absolute;
  top: 41px;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #10202ecc;
  z-index: 1;

  ::v-deep .el-tabs__header {
    margin-right: 0px;
  }

  .demo-tabs {
    color: #dddddd;
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-tabs__active-bar {
    display: none;
  }

  ::v-deep .el-tabs__item {
    padding: 30px 20px !important;

    i {
      color: #ccc;
    }
  }

  ::v-deep .is-active {
    border-left: 4px solid #016EAB;
  }

  ::v-deep .el-tabs__nav-wrap:after {
    background-color: #e4e7ed52;
    width: 1px;
  }

  ::v-deep .el-tabs__content {
    #pane-2 {
      height: 100%;
    }
  }

  ::v-deep .el-tabs__item.is-active,
  .el-tabs__item:hover {
    background: #224a71cc;

    i {
      color: #fff;
    }
  }
}
</style>